import { useMemo } from 'react';
import { Button, Steps } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import { formatAmount } from '@/utils/utils.jsx';
import styles from './AccountDetail.module.less';

const { Step } = Steps;

const AccountDetail = ({ visible, obj, record, handleCancel }) => {

	const { transTypeName } = record;

	const { subject, amountYuan, currentAvailBalance, transType, feeAmountYuan, disAmountYuan, createTime, tradeNo, remark, orderSn, payOrderSn, goodsVOList = [], withdrawalVOList = [], incomeAccountNo, transDesc, rkOrderSns, settleAmount } = obj;

	const data = useMemo(() => {
		if (visible && goodsVOList.length) {
			const arr = [];
			let id = 0;
			goodsVOList.map(item => {
				item.goodsVOList.map(child => {
					arr.push({
						id: id,
						...item,
						...child,
						totalAmount: formatAmount(child.num * child.goodsPrice),
						goodsVOList: undefined
					})
					id = id + 1;
				})
			})
			return arr;
		} else {
			return []
		}
	}, [visible])

	const columns1 = [
		{
			title: '商品信息',
			dataIndex: 'goodsName',
			key: 'goodsName',
			width: 200,
			render: (text, record) => (
				<div style={{ display: 'flex', marginBottom: 0, alignItems: 'center' }}>
					<img src={`https://imgniu.zhaojiafang.com/store/goods/${record.goodsImage}`} alt=" " style={{ width: 64, height: 64, borderRadius: '6px' }} />
					<div style={{ paddingLeft: 8, flex: 1 }}>
						<span>
							{text}
						</span>
					</div>
				</div>
			)
		},
		{
			title: '会员',
			dataIndex: 'account',
			key: 'account',
			width: 120,
		},

	];

	const columns2 = [
		{
			title: '数量',
			dataIndex: 'num',
			key: 'num',
			width: 80,
		},
		{
			title: '小计（元）',
			dataIndex: 'totalAmount',
			key: 'totalAmount',
			width: 120,
            render: (text, record) => (<div>
                <div>{text}</div>
                <div className='common-color10'>{settleAmount > 0 ? `银行结算中（${settleAmount}）`: ''}</div>
            </div>)
		},
	];

	const renderColumns = () => {
		if (transType == 6) {
			return [
				...columns1,
				{
					title: '拿货价（元）',
					dataIndex: 'goodsPrice',
					key: 'goodsPrice',
					width: 100,
					render: (text, record) => {
						return <>
							<span>{text}</span>
							{record.vipPrice && <span style={{ padding: '2px 4px', marginLeft: 4, backgroundColor: "#FFD7EB", color: '#FF4D6C' }}>会员价</span>}
						</>
					}
				},
				...columns2
			]
		} else if (transType == 9 || transType == 22 || transType == 23) {
			return [
				...columns1,
				{
					title: '退货价（元）',
					dataIndex: 'goodsPrice',
					key: 'goodsPrice',
					width: 100,
				},
				...columns2
			]

		} else if (transType == 10) {
			return [
				...columns1,
				...columns2
			]
		} else if (transType == 28) {
			return [
				...columns1,
				{
					title: '采购价（元）',
					dataIndex: 'goodsPrice',
					key: 'goodsPrice',
					width: 100,
					render: (text, record) => {
						return <>
							<span>{text}</span>
							{record.vipPrice && <span style={{ padding: '2px 4px', marginLeft: 4, backgroundColor: "#FFD7EB", color: '#FF4D6C' }}>会员价</span>}
						</>
					}
				},
				...columns2
			]
		}
	}

	const TableProps = {
		data,
		columns: renderColumns(),
		rowKey: 'id',
		scroll: { y: 400 }
	};

	//交易描述：
	const renderTransDesc = () => {
		if(transType == 32){
          return subject;
		}else if(transDesc){
			if(transType == 6 || transType == 9 || transType == 11){
				const textMap = {
					6:'商品拿货',
					9:'商品退货',
					11:'取消备货'
				}
				let num = 0;
				goodsVOList.map(item=>{
					num += item.goodsNum;
				})
				return `${textMap[transType]}${num}件`;
			}else{
				return transDesc;
			}
		}else{
			return '-';
		}
	}

	//提现第二步
	const renderStepTwo = () => {
		if (withdrawalVOList[1].status == '提现成功') {
			return <>
				<Step title='银行处理中' icon={<CheckCircleOutlined />} />
				<Step title='提现成功' icon={<CheckCircleOutlined />} />
			</>
		} else if (withdrawalVOList[1].status == '提现失败') {
			return <Step title={<span style={{ color: '#FF2D51' }}>提现失败退回余额<span style={{ color: '#C9C9C9', marginLeft: 12 }}>{withdrawalVOList[1].time}</span></span>} description={<span>原因：{withdrawalVOList[1].reason}</span>} icon={<CloseCircleOutlined style={{ color: 'red' }} />} />
		} else if (withdrawalVOList[1].status == '银行处理中') {
			return <>
				<Step title='银行处理中' icon={<CheckCircleOutlined color="gray" />} />
				<Step title='提现成功' icon={<CheckCircleOutlined color="gray" />} />
			</>
		}
	}
	// {value: 6, name: "拿货收款"}
	//  {value: 4, name: "商家收款"}
	//  {value: 9 22 23, name: "订单退款"}
	//  {value: 10, name: "取消备货"}
	//  {value: 2, name: "充值"}
	//  {value: 3, name: "提现"}
	//  {value: 14, name: "手续费"}
	// {value: 24, name: "手续费补助"}
	//  {value: 1, name: "营销费用"}
	//  {value: 16, name: "转账充值"}
	//  {value: 26, name: "账期还款"}
	//  {value: 17, name: "其他"}
	// {value: 20, name: "人工处理"}
	return (
		<CommonModal
			title="账单详情"
			visible={visible}
			onCancel={handleCancel}
			footer={[<Button onClick={handleCancel} key='close'>关闭</Button>]}
			width="868px"
		>
			<ul className={styles.infoList}>
				<li className={styles.infoItem}>支付环节：{transType == 32 ? '充值' : transTypeName}</li>
				<li className={styles.infoItem}>交易描述：{renderTransDesc()}</li>
				<li style={{display: 'flex'}} className={styles.infoItem}>收支金额：
                    <span>
                        <span style={{ color: settleAmount > 0 ? 'orange': amountYuan > 0 ? '#FF2D51' : '#00B87C' }}>{amountYuan > 0 ? "+" : ''}{amountYuan}</span>
                        <span style={{ marginLeft: '10px' }} className='common-color10'>{settleAmount > 0 ? `银行结算中（${settleAmount}）`: ''}</span>
                    </span>    
                </li>
				<li className={styles.infoItem}>当前余额：{currentAvailBalance}</li>
				{([2,3,32].includes(transType) || (subject && subject.includes('手续费'))) &&
					<>
						<li className={styles.infoItem}>手续费：<span style={{ color: (disAmountYuan || feeAmountYuan) ? '#3BFF93' : '#333333' }}>{(disAmountYuan || feeAmountYuan) ? '-' : null}{disAmountYuan ? disAmountYuan : feeAmountYuan}</span></li>
						<li className={styles.infoItem}>手续费补助：<span style={{ color: disAmountYuan > 0 ? '#FF2D51' : '#333333' }}>{disAmountYuan > 0 ? "+" : ''}{disAmountYuan}</span>
						</li>
					</>
				}
				<li className={styles.infoItem}>交易时间：{createTime}</li>
				{transType == 2 && <li className={styles.infoItem}>充值单号：{createTime}</li>}
				{(transType == 3 || subject == '提现手续费' || subject == '提现手续费补助') && withdrawalVOList.length > 0 && 
				<>
					<li className={styles.infoItem}>提现单号：{tradeNo}</li>
					<li className={styles.infoItem} style={{ display: "flex" }}><span>提现账户：</span><div style={{ flex: 1 }}>
						<div>开户行：{obj.openBank}</div>
						<div>姓名：{obj.name}</div>
						<div>卡号：{obj.bankNo}</div>
					</div></li>
					<li className={styles.infoItem} style={{ display: "flex" }}><span>处理进度：</span>
						<Steps direction="vertical" current={withdrawalVOList[1].status == '提现成功' ? 2 : 1} style={{ flex: 1 }}>
							<Step title={<span>提交申请<span style={{ color: '#C9C9C9', marginLeft: 12 }}>{withdrawalVOList[0].time}</span></span>} icon={<CheckCircleOutlined />} />
							{renderStepTwo()}
						</Steps>
					</li>
				</>
				}
				{transType == 28 && <li className={styles.infoItem}>入库单号：{rkOrderSns}</li>}
				{transType == 4 && <li className={styles.infoItem}>订单编号：{orderSn}</li>}
				{([9,22,23].includes(transType)) && <li className={styles.infoItem}>退货单号：{payOrderSn}</li>}
				{[10,26,32].includes(transType) && <li className={styles.infoItem}>支付单号：{payOrderSn}</li>}
				{([6,9,22,23].includes(transType)) && <li className={styles.infoItem}>备注说明：{remark}</li>}
			</ul>
			{([6,9,10,22,23,28].includes(transType)) && <CommonTable {...TableProps} />}
		</CommonModal>
	);
};

export default AccountDetail;